<template>
  <el-row :gutter="10">
    <el-col :span="6">
      <el-input @keyup.enter="onAddTodos" v-model.trim="inputVal" placeholder="请输入任务信息">
        <template #prepend>任务</template>
      </el-input>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" @click="onAddTodos">添加新任务</el-button>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {defaultStore} from "@/store/store";
import {toRefs} from "vue";
import {ElMessage} from "element-plus";

// -----------响应式数据部分开始----------

const store = defaultStore()

// 解构store中的数据为响应对象
const { inputVal } = toRefs(store)

// -----------响应式数据部分结束----------

// -----------方法部分开始----------
const onAddTodos = () => {
  if (inputVal.value.length <= 0) return ElMessage.warning('请输入任务呢！')
  store.addTodos()
  inputVal.value = ''
}
// -----------方法部分结束----------
</script>

<style scoped>
.el-row {
  margin-top: 20px;
}

</style>
